<template>
  <div class="hello">
   <MENU></MENU>
    <el-main class="container">
    <div><h1>俗语海报生成</h1></div>
      <div class="row">
        <span style="font-size: 25px">第几天：</span>
        <input style="width: 250px;height: 40px;margin-top: -5px" v-model="day">
      </div>
    <div class="row">
      <span style="font-size: 25px">主题句：</span>
      <input style="width: 250px;height: 40px;margin-top: -5px;margin-left: 47px" v-model="example" @blur="example_change($event.target.value)">
    </div>
      <div class="row" >
        <span style="font-size: 25px">主题句解释：</span>
        <input style="width: 250px;height: 40px;margin-top: -5px" v-model="example_explain" @blur="example_exmplain_change($event.target.value)">
      </div>
      <div style="width: 100%;float: left;margin-top: 30px">
        <el-button size="middle" @click="addnode" style="color: white;font-size: 20px;float:left;background-color: lightblue">添加谚语</el-button>
        <el-button size="middle" @click="download" style="color: white;font-size: 20px;float:left;background-color: lightblue">下载 </el-button>
      </div>
      <el-dialog width="450px" :visible.sync="show" style="margin-left: 20%">
        <el-row style="width: 90%;display: flex;margin: 50px auto">
          <span style="font-size: 18px;">谚语：</span>
          <el-input style="width:300px;margin-top: -10px " v-model="proverb.name" @blur="proverb_change($event.target.value)"></el-input>
        </el-row>
        <el-button size="small" style="margin: -10px auto;background-color: lightblue;color: white" @click="save">保存</el-button>
      </el-dialog>
      <div style="width: 100%;font-size: 25px;float: left;text-align: left;margin-top: 30px">谚语列表</div>
      <div style="width: 100%;font-size: 25px;float: left;text-align: left;margin-top: 30px;font-weight: bold" v-if="proverblist.length === 0">未添加任何谚语</div>
      <div v-for="(i,v) in proverblist" style="width: 100%;float: left" :key="v">
        <div style="width: 20%;float: left;background-color: whitesmoke;margin-top:20px;border-radius: 20px;padding: 30px">
          <i class="el-icon-close" style="font-size: 20px;float: right" v-on:click="deleteWord(v)"></i>
        <div style="width: 100%;font-size: 20px;text-align: left;margin-top: 20px">拼音：{{i.pingyin}}</div>
        <div style="width: 100%;font-size: 20px;text-align: left">谚语：{{i.name}}</div>
        </div>
      </div>

      <div ref="canvas" class="canvas">
        <img src='../assets/logo.png' width="235" alt="logo背景">
        <p class="vocabulary">俗 语</p>
        <div class="example">
          <p style="color: #000;font-size: 15px">{{example_pinyin}}</p>
          <p>{{example}}</p>
        </div>
        <div class="example_explain">
          <p style="color: #000;font-size: 15px">{{example_explain_pinyin}}</p>
          <p>{{example_explain}}</p>
        </div>

        <div class="vocabularyList">
          <div v-for="(i,v) in proverblist" style="width: 100%;float: left" :key="v">
            <div>
              <p style="color: #000;font-size: 15px">{{i.pingyin}}</p>
              <p>{{i.name}}</p>
            </div>
          </div>
        </div>
        <p style="padding: 15px;font-size: 20px;color: rgb(171,183,221);font-family:Helvetica Neue">DAY <span class="day">{{day}}</span></p>
      </div>
    </el-main>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import navbar from './navbar'
import pinyin_util from '../js/pinyin_util'
import CanvasDraw from '../js/canvas_util'

export default {
  name: 'HelloWorld',
  components: {
    MENU: navbar
  },
  data () {
    return {
      list: [{contentType: '', number: ''}],
      show: false,
      proverb: {
        pingyin: '',
        name: ''
      },
      example:"",
      example_pinyin:"",
      example_explain:"",
      example_explain_pinyin:"",
      day:"",
      proverblist: []
    }
  },
  methods: {
    addnode () {
      this.show = true
      this.proverb.name=""
      this.proverb.pingyin=""
    },
    deleteWord (index) {
      var list = this.proverblist
      list.splice(index, 1)
    },
    download() {
      let canvasDraw = new CanvasDraw()
      html2canvas(this.$refs.canvas).then((canvas) => {
        canvasDraw.download_canvas(canvas)
      });
    },
    save () {
      var obj = {
        pingyin: '',
        name: ''
      }
      obj.name = this.proverb.name
      obj.pingyin = this.proverb.pingyin
      this.proverblist.push(obj)
      this.show = false
    },
    example_change(value){
      pinyin_util.get_pinyin(value).then(pinyin=>{
        this.example_pinyin=pinyin
      })
    },
    example_exmplain_change(value){
      pinyin_util.get_pinyin(value).then(pinyin=>{
        this.example_explain_pinyin=pinyin
      })
    },
    proverb_change(value){
      pinyin_util.get_pinyin(value).then(pinyin=>{
        this.proverb.pingyin=pinyin
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  html,body,.hello{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .container{
    position: absolute;
    width: 85%;
    height: 100%;
    left: 15%;
  }
  .row{
    width: 100%;
    height: 80px;
    float: left;
    display: flex;
    margin-top: 50px;
  }
  .row1{
    width: 100%;
    height: 30px;
    float: left;
    display: flex;
    margin-top: 40px;
  }
  .words{
    width: 80%;
    margin-top: 50px;
    margin-left: 17%;
  }

  canvas, .canvas {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 560px;
    transform: translate(0%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgb(239, 247, 254);
  }

  .canvas img {
    padding: 20px;
  }

  .canvas .vocabulary {
    font-size: 30px;
    background: rgb(58, 96, 219);
    color: #fff;
    padding: 5px 20px;
    border-radius: 10px;
    margin: 0 0 20px 0;
  }

  .canvas .example {
    font-size: 25px;
    background: #fff;
    color: rgb(58, 96, 219);
    border-radius: 35px;
    padding: 15px 100px;
    margin: 0px 0 20px 0;
  }
  .canvas .example_explain {
    font-size: 25px;
    color: rgb(58, 96, 219);
    padding: 15px 70px;
    margin: 0px 0 20px 0;
  }
  .canvas .example p,.canvas .example_explain p{
    margin: 0;
  }

  .canvas .vocabularyList {
    width: 85%;
    font-size: 30px;
    background: #fff;
    border-radius: 35px;
    padding: 20px;
  }
  .canvas .vocabularyList div{
    margin: 2px 0;
  }
  .canvas .vocabularyList  p{
    margin: 0;
    color: rgb(58, 96, 219);
    font-size: 25px;
  }

</style>
